<template>
    <div id="Pingfen">
       <div class="ping-fe">
           <van-icon name="arrow-left" @click="$router.go(-1)"/>
           <h2>评分</h2>
       </div>
       <div class="dingdanxinxi">
            <h3><van-icon name="orders-o" />订单信息</h3>
            <p>商品</p>
            <p>发货时间</p>
            <p>到达时间</p>
       </div>
         <div class="dingdanxinxi pifenp">
            <h3><van-icon name="orders-o" />服务评价</h3>
            <p>描述相符<van-rate v-model="prodConformityPoint" />{{prodConformityPoint}}分</p>
            <p>物流速度<van-rate v-model="logisticsSpeedPoint" />{{logisticsSpeedPoint}}分</p>
            <p>服务质量<van-rate v-model="serviceQualityPoint" />{{serviceQualityPoint}}分</p>
       </div>
       <div class="inp">
           <!-- <input type="text" placeholder="请填写评论"> -->
           <textarea v-model="comment">请输入评论</textarea>
       </div>
        <div class="tijiao" @click="pinglun">
           <!-- <input type="text" placeholder="请填写评论"> -->
           <span>提交评论</span>
         
       </div>
    </div>
</template>

<script>
import {GetEvaluateDate} from "@/request/api"
export default {
    name:"Pingfen",
    data () {
        return {
          
           prodConformityPoint:2,
           logisticsSpeedPoint:4,
           serviceQualityPoint:6,
           comment:"",
 
        }
    },
  methods:{
      pinglun(){
          console.log(666);
          GetEvaluateDate(
              {
               serialNo:this.$route.params.id,
               prodConformityPoint:this.prodConformityPoint,
               logisticsSpeedPoint:this.logisticsSpeedPoint,
               serviceQualityPoint:this.serviceQualityPoint,
               comment:this.comment
              }
          ).then((res)=>{
              console.log("评论的返回数据:",res);
          })
      }
  }
}
</script>
 
<style lang = "less" scoped>
    #Pingfen{
        .ping-fe{
            height: .6rem;
            background: #003399;
            font-size: .14rem;
            text-align: center;
            line-height: .6rem;
            color: white;
            display: flex;
            .van-icon{
               width: 0.2rem;
              line-height: .6rem;
              vertical-align: text-bottom;
            }
            h2{
                flex: 1;
                display: flex;
     align-items: center;
     justify-content: center;
   
            }
        }
        .dingdanxinxi{
            font-size: .2rem;
           background: #ffffff;
            line-height: .6rem;
            color: #01349a;
           
          
             h3{
                 height: .6rem;
                  background: #f4fbfe;
                  padding-left:.1rem;
             }
       p{
           color: #b6b6b6;
           height: .4rem;
          line-height: .4rem;
          padding-left:.1rem;
        }
        }
        .pifenp{
    margin-top: .15rem;
            p{
                    padding: .1rem .1rem;
            }
            .van-rate{
                margin-left: .25rem;
            }
        }
       .inp{
               margin: .1rem 0;
               font-size: .14rem;
              
           textarea{
                height: 1rem;
               width: 100%;
               border: none;
               outline: none;
               color:#ccc;
               padding: .1rem;
           }
       }
       .tijiao{
           font-size: .16rem;
           background: #fff;
           text-align: center;
           height: .5rem;
           line-height: .5rem;
           display: flex;
           align-items: center;
           span{
                  margin: 0 auto;
    background: #003499;
    width: 2.9rem;
    color: aliceblue;
    border-radius: .1rem;
    /* margin: .1rem 0; */
    height: .4rem;
    line-height: .4rem;
           }
       }
        }
    
</style>